<template>
    <div>
       <div class="header">    
           <div class="right" v-if="users.isLogin">
             <div class="left">
             <div class="user-avavtar"></div>
           </div>
             <div class="name eps">{{users.username}}</div>
             <div class="trend-code">
               <div class="number">{{users.id}}</div>              
               <div class="inconfont"></div>
                <div @click="loginout" class="xiao">注销</div>
             </div>
           </div>
           <div  @click="tologin" class="login" v-else>请登录</div>
           <div class="entry"> <router-link to='./Home' tag='div' ></router-link></div>
          </div>
          <div class="body">
             <div class="main">默认购物频道</div>
              <router-link to='./Home' tag='div' ><div class="value">男士MEN</div></router-link>
              <div class="arr">&#xe627;</div>
          </div>
         <div class="list">
           <div class="main">我的订单</div>
          <router-link to='./Cart' tag='div' ><div class="value-all">全部订单</div>
            <div class="arr">&#xe627;</div></router-link>
         </div>
         <div class="service">
           <ul>
             <li><div class="iconfont pic">&#xe640;</div><p class="names">待付款</p></li>
             <li><div class="iconfont pic">&#xe641;</div><p class="names">待发货</p></li>
             <li><div class="iconfont pic">&#xe642;</div><p class="names">待收货</p></li>
             <li><div class="iconfont pic">&#xe643;</div><p class="names">商品收藏</p></li>
             <li><div class="iconfont pic">&#xe6f6;</div><p class="names">品牌收藏</p></li>
             <li><div class="iconfont pic">&#xe610;</div><p class="names">浏览记录</p></li>
           </ul>
         </div>
         <div class="list-body">
              <div class="list-item">
                <div class="iconf">&#xe603;</div>
                <div class="body1">消息</div>
                <div class="arr1">&#xe627;</div>
              </div>
               <div class="list-item">
                <div class="iconf">&#xe636;</div>
                <div class="body1">服务与反馈</div>
                <div class="arr1">&#xe627;</div>
              </div>
         </div>
         <div class="img3"><img src="./img/6.jpg" class="img1"></div>
         <div class="img3"><img src="./img/5.jpg" class="img2"></div>
    </div>
</template>

<script>
import {
  mapState,
  mapMutations
} from 'vuex'
export default {
  name: 'Main',
  data () {
   return{
   
   }
  },
    computed:{
    ...mapState(['users'])
  },
  methods:{
    ...mapMutations(['loginout']),
    tologin() {
      this.$router.push({
        name: 'login',
        params: {
        redirect: '/Cartlist'
      }         
      })
    }

  }
}
</script>
<style lang='scss'>
@font-face {
  font-family: 'iconfont';  /* project id 935498 */
  src: url('//at.alicdn.com/t/font_935498_1x7ne0lp2gl.eot');
  src: url('//at.alicdn.com/t/font_935498_1x7ne0lp2gl.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_935498_1x7ne0lp2gl.woff') format('woff'),
  url('//at.alicdn.com/t/font_935498_1x7ne0lp2gl.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_935498_1x7ne0lp2gl.svg#iconfont') format('svg');
}
.arr{
   font-family: 'iconfont'; 
}
.iconfont{
   font-family: 'iconfont';
       font-size: 2.25rem;
    height: 2.375rem;
    line-height: 2.125rem;
    padding-top: .25rem;
}
 .header {
      background-image: url(./img/1.jpg);
    background-size: cover;
    height: 5.1rem;
    padding: 1.15rem 1.75rem 1.45rem;
    position: relative;   
  .left {
    float: left;
    height: 3.5rem;
    position: relative;
    width: 3.5rem;
    .user-avavtar {
    background-image: url(./img/2.png);
    background-position: 50%;
    background-size: cover;
    border: .075rem solid #fff;
    border-radius: 50%;
    height: 100%;
    overflow: hidden;
    width: 100%;
    }
 }
   .right{
     color: #fff;
    float: left;
    height: 2.5rem;
    margin-left: .5rem;
    width: 11.25rem;
    .name{
      font-size: 1rem;
      margin-left:77px; 
    line-height: 2.25rem;
    }
    .trend-code{
      float: left;
    line-height: 1.25rem;
    .dot{
        text-align: right;
    width: .75rem;
        float: left;
      }
    }
    .number{
      left: 60px;
    position: relative;
    top: -15px;
    white-space: nowrap;
        float: left;
    }
    .inconfont{
          font-size: .75rem;
    margin-left: .25rem;
    vertical-align: middle;
    width: .75rem;
        float: left;
     }
    }
    .entry{
      background-image: url(./img/3.gif);
    background-repeat: no-repeat;
    background-size: 100%;
    bottom: 0;
    display: block;
    height: 5.4rem;
    position: absolute;
    right: 0;
    width: 5.4rem;
    }
    }
   .body{
         background-color: #fff;
    
    margin-bottom: .5rem;
     
    height:2rem;
    .main{
          font-size: 1.1rem;
       width: 9rem;
           color: #444;
    float: left;
        overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 2rem;
    }
    .value{
          color: #444;
    float: left;
    font-size: 1rem;
margin-left: 122px;
 line-height: 2rem;
    }
    .arr{
     
       line-height: 2rem; 
       float: right;
    margin-right: 12px;
        
    }
}
   
.list{
      display: block;
    height: 2.2rem;
    line-height: 2.2rem;
    padding: 0 0 0 .75rem;
 background-color: #fff;
           margin-bottom: .5rem;
        height: 2rem;
        .main{
          font-size: 1rem;
    width: 9rem;
        color: #444;
    float: left;
        }
        .value-all{
       color: #444;
    float: left;
    font-size: 1rem;
margin-left: 120px;
 line-height: 2rem;
 margin-left: 120px;
        }
        .arr{
              float: right;
    margin-right: 12px;
     line-height: 2rem; 
        
        }
}
.service{
 
    background-color: #fff;
   
    margin-bottom: .5rem;
    margin-top: -.5rem;
    ul{
     display: flex;
     width: 100%;
     height: 225px;
     flex-wrap: wrap;
      li{
          border-top: 1px solid #e0e0e0;
    color: #444;
    float: left;
    height: 3.625rem;
    padding: .5rem 1.625rem;
    position: relative;
    text-align: center;
    width: 4.25rem;
    }
    .names{
     color: #444;
    font-size: 1.0rem;
    height: 2.375rem;
    line-height: 2.375rem;
    }
    }
    
}
.list-body{
      background-color: #fff;
    
    margin-bottom: .5rem;
  
    .list-item{
        display: block;
    height: 2.5rem;
    line-height: 2.2rem;
    padding: 0 0 0 .75rem;
    border-bottom: 1px solid #e0e0e0;
    
     .iconf{
           font-size: 1.125rem;
        width: 1.5rem;
         font-family: 'iconfont'; 
         float: left;
      
     }
     .arr1{
       font-family: 'iconfont'; 
       float: right;
             margin-right: 9px;
     }
     .body1{
           background-color: #fff;
   
    height: 2rem;
    float: left;
     }
    }
}
.img3{
    margin-bottom: 10px;
     .img1{display: block;
    height: 90px;}  
      .img2{display: block;
    height: 118px;
    }  
}
.login{
  color: #ffffff;
      border: .075rem solid #fff;
    display: block;
    font-size: 1rem;
    height: 2rem;
    line-height: 2rem;
    margin: 1rem auto;
    text-align: center;
    width: 6.5rem;
}
 
</style>
